(function($, window, PubSub){
	var tpl = [
	'<div class ="filter-list">',
		'<div class="pure-g">',
		    '<div class="pure-u-1-2 cancel">取消</div>',
		    '<div class="pure-u-1-2">区域<span class="confirm">完成</span></div>',
		    // '<div class="pure-u-1-3">确定</div>',
		'</div>',
		'<div class ="filter-subitem">',
			'<div class="pure-g">',
			    '<div class="pure-u-1-2 left"><div class="pure-g"></div></div>',
			    '<div class="pure-u-1-2 right"><div class="pure-g"></div></div>',
			'</div>',
		'</div>',
	'</div>'
	].join('');

	var source = [
		'<div class="pure-u-1 filter-item" code="">不限</div>',
		'{{each list as value i}}',
	    	'<div class="pure-u-1 filter-item" code="{{value.code}}">{{value.name}}</div>',
	    '{{/each}}'
	].join('');

	function zoneFilter(data) {
		this.state = data.city.subs;
		this.index = 0;
		this.data = {regionCode: '', name: '区域'};
		this._init();
	}
	zoneFilter.prototype = {
		_init: function() {
			this._appendFilter();
			this._initDom();
			this._initEvents();
			this._renderLeft(this.state);
		},
		_appendFilter: function() {
			this.$body = $("html");
			this.$body.append(tpl);
		},
		_initDom: function() {
			this.left = '.left .filter-item';
			this.right = '.right .filter-item';
			this.cancel = '.filter-list .cancel';
			this.confirm = '.filter-list .confirm';
			this.$left = $('.left .pure-g');
			this.$right = $('.right .pure-g');
		},
		_initEvents: function() {
			var self = this;
			this.$body.on('click', this.left, function() {
				self._handleLeft.call(this, self);
			});
			this.$body.on('click', this.right, function() {
				self._handleRight.call(this, self);
			});
			this.$body.on('click', this.cancel, function() {
				self._hide();
			});
			this.$body.on('click', this.confirm, function() {
				self._hide();
				PubSub.publish('0', self.data);
			});
		},
		_renderLeft: function(data) {
			var render = template.compile(source);
			var html = render({list: data});
			this.$left.empty().append(html);
		},
		_renderRight: function(data) {
			var render = template.compile(source);
			var html = render({list: data});
			this.$right.empty().append(html);
		},
		_handleLeft: function(self) {
			$(this).addClass("selected").siblings().removeClass("selected");
			self.data.regionCode = $(this).attr('code');
			self.data.name = $(this).text();
			self.index = $(this).index();
			if(0 == self.index) {
				self.$right.empty();
				self.data.name = '不限';
				return
			}
			self._renderRight(self.state[self.index - 1].subs);
		},
		_handleRight: function(self) {
			var that = $(this);
			that.addClass("selected").siblings().removeClass("selected");
			if(that.index() != 0) {
				self.data.regionCode = that.attr('code');
				self.data.name = $(this).text();
			}
		},
		_hide: function() {
			this.$body.removeClass('zone');
		}
	}

	window.zoneFilter = zoneFilter;


	var filterTpl = [
		'<div class ="screen-list">',
			'<div class="pure-g">',
			    '<div class="pure-u-1-3 cancel">取消</div>',
			    '<div class="pure-u-1-3">筛选</div>',
			    '<div class="pure-u-1-3 confirm">完成</div>',
			'</div>',
			'<div class ="screen-subitem">',
				'<div class="pure-g screen-item">',
				    '<div class="pure-u-1" roomNum="">全部</div>',
				    '<div class="pure-u-1" roomNum="1">一室</div>',
				    '<div class="pure-u-1" roomNum="2">二室</div>',
				    '<div class="pure-u-1" roomNum="3">三室</div>',
				    '<div class="pure-u-1" roomNum="4">四室+</div>',
				'</div>',
				'<div class="pure-g">',
				    '<div class="pure-u-1-2">价格</div>',
				    '<div class="pure-u-1-2"><span class="min">0</span> - <span class="max">5000</span>+</div>',
				    '<div id="slider"></div>',
				'</div>',
			'</div>',
		'</div>'
	].join('');

	function screenFilter() {
		this._init();
	}

	screenFilter.prototype = {
		_init: function() {
			this.data = {roomNum: '', rent: '', name: '筛选'};
			this._initDom();
			this._handleEvent();
			this._range();
		},
		_range: function() {
			
			var slider = document.getElementById('slider');
			var self = this;
			noUiSlider.create(slider, {
				start: [0, 5000],
				connect: true,
				step: 1,
				range: {
					'min': 0,
					'max': 5000
				}
			});
			slider.noUiSlider.on('update', function( values, handle ) {
				self.$min.text(parseInt(values[0]));
				self.$max.text(parseInt(values[1]));
				self.data.rent = parseInt(values[0]) + '-' + parseInt(values[1]);
			});
		},
		_initDom: function() {
			this.$body = $("html");
			this.$body.append(filterTpl);
			this.cancel = '.screen-list .cancel';
			this.confirm = '.screen-list .confirm';
			this.input = '.screen-subitem input';
			this.item = '.screen-item div';
			this.$min = $('.min');
			this.$max = $('.max');
		},
		_handleEvent: function() {
			var self = this;
			this.$body.on('click', this.cancel, function() {
				self._hide();
			});
			this.$body.on('click', this.confirm, function() {
				self._hide();
				var text = '';
				if(self.data.roomNum) {
					text += self.data.roomNum + '室'
				}
				if(self.data.rent && text != '') {
					text += ' ' + self.data.rent
				} else if(self.data.rent && text == ''){
					text += '全部' + ' ' +self.data.rent
				}
				self.data.name = text;
				PubSub.publish('1', self.data);
			});
			this.$body.on('click', this.item, function() {
				var that = $(this);
				that.addClass("selected").siblings().removeClass("selected");
				self.data.roomNum = that.attr('roomNum');
			});
		},
		_hide: function() {
			this.$body.removeClass('filter');
		}
	}

	window.screenFilter = screenFilter;

	var sortTpl = [
		'<div class ="sort-list">',
			'<div class="pure-g">',
			    '<div class="pure-u-1-3 cancel">取消</div>',
			    '<div class="pure-u-1-3">排序</div>',
			    '<div class="pure-u-1-3 confirm">完成</div>',
			'</div>',
			'<div class ="sort-subitem">',
				'<div class="pure-g sort-item">',
					'<div class="pure-u-1" order="">不限</div>',
				    '<div class="pure-u-1" order="rent_asc">价格从低到高</div>',
				    '<div class="pure-u-1" order="room_asc">厅室从低到高</div>',
				    '<div class="pure-u-1" order="leader_asc">室长数从低到高</div>',
				'</div>',
			'</div>',
		'</div>'
	].join('');

	function sortFilter() {
		this._init();
	}

	sortFilter.prototype = {
		_init: function() {
			this.data = {order: '', name: '排序'};
			this._initDom();
			this._handleEvent();
		},
		_initDom: function() {
			this.$body = $("html");
			this.$body.append(sortTpl);
			this.cancel = '.sort-list .cancel';
			this.confirm = '.sort-list .confirm';
			this.item = '.sort-item div';
		},
		_handleEvent: function() {
			var self = this;
			this.$body.on('click', this.cancel, function() {
				self._hide();
			});
			this.$body.on('click', this.confirm, function() {
				self._hide();
				PubSub.publish('2', self.data)
			});
			this.$body.on('click', this.item, function() {
				var that = $(this);
				if(that.text() == '不限') {
					that.addClass("selected").siblings().removeClass("selected");
					self.data.order = '';
					self.data.name = '不限';
					return;
				}
				if(that.hasClass('selected')) {
					var value = that.attr('order'),
						length= value.length,
						text  = that.text(),
						len   = text.length;

					if(that.attr('order').indexOf('asc') > -1) {
						that.attr('order', that.attr('order').substring(0, length-3) + 'desc');
						that.text(text.substring(0, len-4)+ '从高到低');

					} else {
						that.attr('order', that.attr('order').substring(0, length-4) + 'asc');
						that.text(text.substring(0, len-4)+ '从低到高');
					}
					return
				} 
				that.addClass("selected").siblings().removeClass("selected");
				self.data.order = that.attr('order');
				self.data.name = that.text().substring(0, that.text().length - 4)
			});
		},
		_hide: function() {
			this.$body.removeClass('sort');
		}
	}

	window.sortFilter = sortFilter;

})($, window, PubSub)